<template>
  <div id="main">
    <div class="view">
      <router-view/>
      <!-- <div>
          <h3>微信相关的信息</h3>
          <div>
              <p>微信的uuid：{{this.isSgin && this.isSgin.uuid}}</p>
              <p>微信的url：{{this.isSgin && this.isSgin.url}}</p>
              <p>微信的openid：{{this.wx && this.isSgin.openid}}</p>
              <p>微信的unionid：{{this.wx && this.isSgin.unionid}}</p>
          </div>
      </div> -->
      <!-- 微信注册弹框 -->
     <div class="bind-phone" v-if="isBindPhone">
        <div class="content">
            <h2>绑定手机号码</h2>
            <input type="tel" placeholder="输入手机号码" v-model="form.tel">
            <div>
                <input type="tel" placeholder="输入验证码" v-model="form.code">
                <span @click="getCode">{{hint}}</span>
            </div>
            <button @click="bindPhone">绑定</button>
        </div>
     </div>
    </div>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui'
export default {
    name: 'App',
    data() {
        return {
            isSgin: null, //登录信息
            dataShow: {},
            wx: {},
            uuid: '',
            hint: '获取验证码',
            form: {
                tel: '',
                code: '',
                password: 123456
            },
            disableds:true,//是否发送验证码
        }
    },

    watch: {
        $route(newVal, oldVal) {
            let newPath = newVal.path.split('/')[1]
            let oldPath = oldVal.path.split('/')[1]
            if (newPath == 'direct_pay' && oldPath == 'users') {
                if (newVal.path == url) {
                    this.$router.push({
                        path: '/chips_details/' + newVal.path.split('/')[2]
                    })
                }
            }
        }
    },

    created() {
        this.isSgin = this.utils.cookie('get', 'sgin_messages') || null //uuid等一些信息
        this.wx = this.utils.cookie('get', 'wx_message') // 获取微信id
        // 在任何页面进行微信授权
        this.authorization()

        // 获取微信配置
        this.utils.$get(this.utils.GET_WX_SET, data => {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.data.appid, // 必填，公众号的唯一标识
                timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
                signature: data.data.signature, // 必填，签名
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'chooseWXPay'
                ] // 必填，需要使用的JS接口列表
            })
        })
        // 是否登录页面
        // if (this.utils.browser.weixin && !this.utils.cookie('user', 'get')) {
        //     this.$http.jsonp(this.utils.GET_WX_MESSAGE).then(data => {
        //         console.log(data.body,'微信授权')
        //         this.$store.commit('transmitWx', data.body)
        //     })
        // }
        // 获取用户信息
        if (this.utils.cookie('get', 'user')) {
            this.getUserMessage()
        }
    },
    // 监控手机号弹框是否弹起
    computed: {
        isBindPhone(){
            return this.$store.state.isBindTel
        }
    },
    methods: {
        // 用户进行授权
        authorization() {
            // 当是微信浏览器以及cookie里面没有openid时进入授权
            if (this.utils.browser.weixin && !this.isSgin) {
                //创建一个uuid
                let uuid = this.utils.guid()
                // 声明返回的url
                let url = location.href.split('#')[0]
                // #号后面的参数
                let parms = this.$route.path.replace(/[/]/g, '-')
                // 格式化为json
                let sgin_message = JSON.stringify({
                    uuid: uuid,
                    url: url,
                    parms: parms
                })
                // 将uuid等一些信息存入cookie
                this.utils.cookie('set', 'sgin_messages', sgin_message, 'd1')
                Indicator.open({
                    text: '授权中...',
                    spinnerType: 'fading-circle'
                })
                // 自动访问授权链接
                location.href =
                    'http://www.1sedu.com/lifetime/share/get_openid?identity=' +
                    uuid +
                    '&toUrl=' +
                    url +
                    '&parms=' +
                    parms
            }
        },
        wxLogin() {
            // 获取uuid
            this.isSgin = this.utils.cookie('get', 'sgin_messages') //uuid等一些信息
            if (this.isSgin) {
                // 获取微信用户openid
                this.uuid = this.isSgin.uuid
                if (this.utils.browser.weixin) {
                    this.utils.$get(
                        this.utils.GETOPENID,
                        parame => {
                            // 存openid
                            this.wx = parame.data
                            if (this.wx.openid != null) {
                                // 格式化openid信息
                                let openid = JSON.stringify(parame.data)
                                // 将openid存到cookie
                                this.utils.cookie(
                                    'set',
                                    'wx_message',
                                    openid,
                                    'd1'
                                )
                                // 将openid存到仓库
                                this.$store.commit('transmitWx', openid.unionid)
                            }
                            Indicator.close()
                            // 查询是否绑定手机号
                            this.utils.$get(
                                this.utils.ISBINDPHONE,
                                res => {
                                    if (!res.data) {
                                        this.isBindPhone = true
                                        // 绑定手机号逻辑
                                    } else {
                                        this.isBindPhone = false
                                        this.utils.$post(
                                            this.utils.GET_WX_LOGIN,
                                            res => {
                                                mui.toast('登录成功')
                                                // 获取用户数据
                                                this.getUserMessage()
                                            },
                                            { openid: this.wx.unionid }
                                        )
                                    }
                                },
                                { unionid: this.wx.unionid }
                            )
                        },
                        { identity: this.uuid }
                    )
                }
            }
        },
        // 获取用户信息
        getUserMessage() {
            this.utils.$get(this.utils.GET_USER_mESSAGE, data => {
                this.$store.commit('transmitUser', data.data)
            })
        },
        // 发送验证码
        getCode() {
            console.log(this.disableds)
            if(!this.disableds){
                return
            }
            this.disableds = false
            let i = 60
            let type = {
                type: 5,
                tel: this.form.tel
            }
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return mui.toast('请输入正确的手机号')
            }
            // 判断手机号是否被注册
            let countDown
            this.utils.$get(
                this.utils.GET_USERTEL,
                data => {
                    // 发送验证码
                    this.utils.$post(
                        this.utils.GET_USERSMS,
                        data => {
                            countDown = setInterval(() => {
                                this.disableds = false
                                i--
                                this.hint = i + 's'
                                if (i <= 0) {
                                    this.disableds = true
                                    this.hint = '获取验证码'
                                    clearInterval(countDown)
                                }
                            }, 1000)
                        },
                        type
                    )
                },
                type
            )
        },
        // 绑定手机号
        bindPhone() {
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return mui.toast('请输入正确的手机号')
            }
            if (!/^[0-9]*$/.test(this.form.code)) {
                return mui.toast('请填写正确的验证码')
            }
            if (!/^[a-zA-Z0-9]{6,15}$/.test(this.form.password)) {
                return mui.toast('请填写正确的密码')
            }
            let userData = {
                tel: this.form.tel,
                code: this.form.code,
                openid: this.wx.openid,
                channel: 2,
                password: 123456,
                type: 7,
                inviteCode: ''
            }
            // 绑定手机号
            this.utils.$post(
                this.utils.ADD_USER_CROWD,
                resData => {
                    this.utils.$post(
                        this.utils.GET_WX_LOGIN,
                        res => {
                            mui.toast('手机号绑定成功')
                            this.isBindPhone = false
                            this.$store.commit('transmiBindTel',false)
                            // 获取用户数据
                            this.getUserMessage()
                        },
                        { openid: this.wx.unionid }
                    )
                },
                userData
            )
        }
    }
}
</script>
<style lang='less'>
#main {
    height: 100%;
    background-color: rgb(242, 242, 242);
}
.view {
    height: 100%;
    background-color: #fff;
}
.bind-phone {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    .content {
        padding: 0 0.3rem;
        width: 6rem;
        position: absolute;
        height: 8rem;
        background: url('./assets/背景_绑定手机.png') no-repeat center/cover;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        > h2 {
            margin-top: 2.5rem;
            width: 100%;
            text-align: center;
            color: #232323;
            font-size: 0.36rem;
            font-weight: 600;
            padding: 0.3rem 0;
        }
        > input {
            width: 100%;
            border-radius: 0.08rem;
            height: 0.8rem;
            line-height: 0.8rem;
            border: 1px solid #ccc;
            padding: 0 0.1rem;
            color: 0.28rem;
        }
        > div {
            margin-top: 0.4rem;
            position: relative;
            > input {
                width: 100%;
                border-radius: 0.08rem;
                height: 0.8rem;
                line-height: 0.8rem;
                border: 1px solid #ccc;
                padding: 0 0.1rem;
                color: 0.28rem;
            }
            > span {
                color: #00d8c9;
                font-size: 0.28rem;
                position: absolute;
                top: 0.25rem;
                right: 0.2rem;
            }
        }
        > button {
            margin-top: 0.4rem;
            display: block;
            color: #fff;
            background-color: #00d8c9;
            width: 100%;
            height: 0.8rem;
            border-radius: 0.4rem;
        }
    }
}
</style>

 